
Ext.onReady(function () {
    new Ext.Viewport({
	/*layout: {
	    type: 'vbox',
	    align: 'stretch'
	},*/
	//layout: 'form',
	autoScroll: true,
	items: [{
	    html: '<center style="color:white;background-color:black"><br/>THIS IS A VISUAL DEMO, NO FUNCTIONALITY HAS BEEN IMPLEMENTED YET!!!<br/><br/></center>'
	},{
	    border: false,
	    flex: 1,
	    layout: {
		type: 'hbox',
		align: 'top'
	    },
	    items:[{
		xtype: 'spacer',
		flex: 1
	    },{
		width: 900,
		border: false,
		items: [{
		    xtype: 'spacer',
		    height: 10
		},{
		    xtype: 'container',
		    height: 20,
		    border: false,
		    layout: {
			type: 'hbox',
			align: 'top'
		    },
		    items: [{
			xtype: 'label',
			text: 'Tron Jobs:',
			style: 'font-weight:bold;'
		    },{
			xtype: 'spacer',
			width: 5
		    },{
			xtype: 'label',
			text: [
			    '"Reducing arph arpha of job expectation error',
			    '"Making designs with uncut, hollow spheres',
			    '"Writing yesterday\'s unit tests tomorrow',
			    '"Pretending you never saw that segfault',
			    '"Putting off writing a work report',
			    '"Laughing at XKCD\'s you didn\'t understand to seem smarter',
			    '"Asking too many questions in lectures',
			][Math.floor(Math.random()*7)] + ' since 2009."',
		    },{
			xtype: 'spacer',
			flex: 1
		    },{
			xtype: 'label',
			text: 'Leigh Pauls 2011',
			style: 'color:grey;font-size:9px'
		    }]
		},{
		    xtype: 'spacer',
		    height: 10
		},{
		    xtype: 'panel',
		    flex: 1,
		    padding: '5 40 0 40',
		    items: [{
			xtype: 'container',
			height: 40,
			layout: {
			    type: 'hbox',
			    align: 'middle'
			},
			items: [{
			    xtype: 'button',
			    text: 'Write a Job Review',
			    width: 150
			},{
			    xtype: 'spacer',
			    width: 5
			},{
			    xtype: 'button',
			    text: 'Edit My Job Reviews',
			    width: 150
			},{
			    xtype: 'spacer',
			    flex: 1
			},{
			    xtype: 'container',
			    padding: 0,
			    height: 40,
			    width: 400,
			    layout: {
				type:'hbox',
				align: 'middle'
			    },
			    style: 'font-size:14px;',
			    items: [{
				xtype: 'spacer',
				flex: 1
			    },{
				xtype: 'label',
				text: 'Logged in as:'
			    },{
				xtype: 'spacer',
				width: 5
			    },{
				xtype: 'label',
				text: 'Chris Moore-Butz'
			    },{
				xtype: 'spacer',
				width: 5
			    },{
				xtype: 'button',
				text: 'Logout'
			    }]
			}]
		    },{
			xtype: 'spacer',
			height: 5
		    },{
			xtype: 'fieldset',
			padding: '15 110 15 80',
			title: 'Search For Job Reviews',
			items: [{
			    xtype: 'combo',
			    width: 500,
			    fieldLabel: 'Employer',
			    typeAhead: true,
			    triggerAction: 'all',
			    mode: 'local',
			    store: new Ext.data.ArrayStore({
				fields: ['value'],
				data: [['Reseach In Motion (RIM)'], ['BlueCoat'], ['Christie Digital']]
			    }),
			    valueField: 'value',
			    displayField: 'value'
			},{
			    xtype: 'spacer',
			    height: 10
			},{
			    xtype: 'combo',
			    width: 500,
			    fieldLabel: 'Location',
			    typeAhead: true,
			    triggerAction: 'all',
			    mode: 'local',
			    store: new Ext.data.ArrayStore({
				fields: ['value'],
				data: [['Any'], ['Waterloo'], ['Toronto']]
			    }),
			    valueField: 'value',
			    displayField: 'value'
			},{
			    xtype: 'spacer',
			    height: 10
			},{
			    xtype: 'combo',
			    width: 500,
			    fieldLabel: 'Division',
			    typeAhead: true,
			    triggerAction: 'all',
			    mode: 'local',
			    store: new Ext.data.ArrayStore({
				fields: ['value'],
				data: [['Any'],
				       ['Audio Development'],
				       ['Audio Testing'],
				       ['Security Development'],
				       ['Security Testing'],
				       ['Tech Support']]
			    }),
			    valueField: 'value',
			    displayField: 'value'
			},{
			    xtype: 'spacer',
			    height: 10
			},{
			    xtype: 'combo',
			    width: 500,
			    fieldLabel: 'Position',
			    typeAhead: true,
			    triggerAction: 'all',
			    mode: 'local',
			    store: new Ext.data.ArrayStore({
				fields: ['value'],
				data: [['Any'],
				       ['Software Engineer'],
				       ['Software Developer'],
				       ['Software Tester'],
				       ['Caffinated Beverage Retrieval Specialist']]
			    }),
			    valueField: 'value',
			    displayField: 'value'
			},{
			    xtype: 'spacer',
			    height: 10
			},{
			    xtype: 'container',
			    layout: 'hbox',
			    items:[{
				xtype: 'spacer',
				flex: 1
			    },{
				xtype: 'button',
				text: 'Search',
				width: 80
			    }]
			}]
		    },{
			xtype: 'fieldset',
			title: 'Search Results',
			height: 2000
		    }]
		}]
	    },{
		xtype: 'spacer',
		flex: 1
	    }]
	}]
    });    
});